<template>
  <div class="con">
    <tree @change-video="changeVideo" ref="treeDemo" class="treeDom"></tree>
    <div class="videoDome">
      <div class="main_title">
        <i class="iconfont el-icon-electronic-map"></i>&nbsp;电子地图
      </div>
      <baidu-map
        style="height: 76vh; width: 100%; margin-top: 15px"
        ak="iOaxgbNT1RFO5XmF9pb9bHKdcUBGzY4r"
        :center="center"
        :zoom="zoom"
        :scroll-wheel-zoom="true"
      >
        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
        <bm-navigation anchor="BMAP_PERSPECTIVE_MAP"></bm-navigation>

        <bml-marker-clusterer v-if="showMarke">
          <bm-marker
            style="display: none"
            v-for="marker of $store.state.nvrData"
            :position="{
              lng: marker.nvr_longitude,
              lat: marker.nvr_dimensionality,
            }"
            :icon="marker.nvr_state == 0 ? icon1 : icon2"
            :key="marker.node_id"
            @click="addMaker(marker)"
          >
          </bm-marker>
        </bml-marker-clusterer>
        <bm-info-window
          :show="mapshow"
          @close="infoWindowClose"
          :position="{
            lng: marker.nvr_longitude,
            lat: marker.nvr_dimensionality,
          }"
          :width="0"
          :height="0"
        >
          <dd>
            {{ marker.title }}
          </dd>
          <p>
            <label>负责人：</label><span>{{ marker.nvr_principal }}</span>
          </p>
          <p>
            联系电话：<span>{{ marker.nvr_simCard }}</span>
          </p>
          <p>
            经度：<span>{{ marker.nvr_longitude }}</span>
          </p>
          <p>
            纬度：<span>{{ marker.nvr_dimensionality }}</span>
          </p>
          <p>
            位置信息：<span>{{
              marker.nvr_address
                ? marker.nvr_address
                : "" + "&nbsp;" + marker.title
            }}</span>
          </p>

          <el-button
            :disabled="marker.nvr_state == 0"
            :class="{ bgt: marker.nvr_state == 0 }"
            @click="skip(marker)"
            >{{ marker.nvr_state == 0 ? "设备离线" : "监控播放" }}</el-button
          >
        </bm-info-window>
      </baidu-map>
    </div>
  </div>
</template>

<script>
import Tree from "@/components/tree";
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import {
  BmlMarkerClusterer,
  BmMarker,
  BmNavigation,
  BmScale,
  BmInfoWindow,
} from "vue-baidu-map";
export default {
  name: "OnlineMap",
  components: {
    Tree,
    BaiduMap,
    BmlMarkerClusterer,
    BmMarker,
    BmNavigation,
    BmScale,
    BmInfoWindow,
  },
  data() {
    return {
      center: { lng: 113.5151, lat: 34.8418 },
      zoom: 15,
      icon1: {
        url: require("../assets/images/offline.png"),
        size: { width: 35, height: 35 },
      },
      icon2: {
        url: require("../assets/images/online.png"),
        size: { width: 35, height: 35 },
      },
      mapshow: false,
      // setMapData: [],
      marker: {},
      showMarke: false,
    };
  },
  mounted() {},
  watch: {
    "$store.state.nvrData": {
      handler(val) {
        val.length > 0 ? (this.showMarke = true) : "";
      },
    },
  },
  activated() {
    this.$store.state.nvrData.length > 0 && (this.showMarke = true);
  },
  methods: {
    changeVideo(dt) {
      this.addMaker(dt);
    },
    addMaker(nvr) {
      this.marker = nvr;
      this.center.lng = nvr.nvr_longitude;
      this.center.lat = nvr.nvr_dimensionality;
      this.zoom = 19;
      setTimeout(() => {
        this.$refs["treeDemo"].$refs["tree"].setCurrentKey(nvr.node_id);
        this.mapshow = true;
      }, 60);
    },

    infoWindowClose() {
      this.mapshow = false;
    },
    skip(val) {
      this.$router.push({
        name: "Video",
        params: {
          id: val.node_id,
          imei: val.nvr_IMEI,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.videoDome {
  width: 80%;
  height: 78vh;
}
.treeDom {
  height: 78vh;
}
.BMap_bubble_content {
  .pf {
    .fsize(14px);
    font-weight: bold;
    padding: 5px 10px;
  }
  p {
    .pf;
    span {
      font-weight: normal;
    }
  }
  dd {
    margin-top: 15px;
    .pf;
    color: #0d8bbd;
    .bor-btm(1px,#eee);
    span {
      float: right;
    }
  }
  .el-button {
    margin-left: 30%;
    background: #5bc0de;
    color: white;
  }
  .bgt {
    // background: #eee;
    opacity: 0.5;
  }
}
</style>
